<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import server from '@/utils/server';
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { EDIT, VIEW } from '@/views/config'

const router = useRouter()
const route = useRoute()

const blogData = reactive({
    text: '',
    textarea: '',
    loding: false
})

const isView = route.query?.type === VIEW
async function getBlogdetail() {
    if (route.query?.type === EDIT || isView) {
        const { errno, data } = await server.get(`/api/blog/detail?id=${route.query.id}`)
        if (errno === 0) {
            blogData.textarea = data.content
            blogData.text = data.title
        }
    }
}
getBlogdetail()

// 编辑
async function updateBlog(title: string, content: string) {
    try {
        const { errno, message } = await server.post('/api/blog/update', {
            id: route.query.id,
            title,
            content
        })
        if (errno === 1) {
            ElMessage.error(message)
            return
        }
        ElMessage.success('更新成功')
        router.push('/')
    } catch (err) {
        blogData.loding = false
    }finally{
        blogData.loding = false
    }
}
// 新增
async function addBlog(title: string, content: string) {
    try {
        const { errno, message } = await server.post('/api/blog/new', {
            title,
            content
        })
        if (errno === 1) {
            ElMessage.error(message)
            return
        }
        ElMessage.success('发帖成功')
        router.push('/')
    } catch (err) {
        console.log(err)
    }finally{
        blogData.loding = false
    }
}
const postCommunication = () => {
    const title = blogData.text.trim()
    const content = blogData.textarea.trim()
    if (!title || !content) {
        ElMessage.warning('标题或内容未填写')
        return
    }
    blogData.loding = true
    if (route.query?.type === EDIT) {
        updateBlog(title, content)
    } else if (!isView) {
        addBlog(title, content)
    }
}
</script>
<template>
    <div>
        <div class="text-base mt-6 px-6 bg-white border py-5 border-b text-gray-800">发表话题</div>
        <div v-if="isView" class="text-base px-6 bg-white border border-t-0 py-5 border-b text-gray-800">
            <el-descriptions title="帖子">
                <el-descriptions-item :label="blogData.text">
                    {{blogData.textarea}}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div v-else class="text-base px-6 bg-white border border-t-0 py-5 border-b text-gray-800">
            <el-input v-model="blogData.text" class=" pb-2" maxlength="10" placeholder="请输入帖子标题" show-word-limit type="text" />
            <el-input v-model="blogData.textarea" :autosize="{minRows: 6}" maxlength="30" placeholder="请输入帖子内容" show-word-limit type="textarea" />
        </div>
        <el-button :loading="blogData.loding" class="bg-primary float-right mt-1" @click="postCommunication"
            :disabled="isView" type="primary">发帖交流</el-button>
    </div>
</template>